<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet" />
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/vue-resource.min.js}"></script>
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-typeahead.min.js}"></script>
    <script th:src="@{/js/bootstrap.autocomplete.js}"></script>
    <script th:src="@{/js/common/vue-const.js}"></script>
    <script th:src="@{/js/common/autoComponent.js}"></script>
    <style type="text/css">
        .autoDiv {
					  max-height:300px; 
					  height:expression(width>300?"300px":height+"px"); 
					  overflow-y:auto;
			      }
        .leftBarItem{
            color: gainsboro;
        }
        .leftBarItem:hover{
            color: #0f0f0f;
            background-color: #0f0f0f;
        }
        .nav-pills>li>a {
            border-radius: 0px;
        }
        .rowSet {
            margin-right: 0px;
            margin-left: 0px;
        }
        #bodyFrame{
            height:100%;margin: 0px;
            padding: 0px;
        }
        #centerBody{
            overflow: auto;margin: 0px;
            font-size: 12px;
            font-family: "宋体";
        }
        .imgItem{
            cursor: pointer;
        }
        .form-controlX{
            border:0px;
            border-bottom: 1px solid gray;
            border-radius: 0px;
            width: auto;
            box-shadow: 0px 0px 0px 0px white;
            padding-left: 10px;
            padding-bottom: 2px;
            margin-bottom: 10px;
        }
        .control-labelX{
            margin-bottom: 10px;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }
        table {
            font-size: 12px;
            vertical-align: center;
            padding: 0px;
        }
        tr {
            border: 1px solid gainsboro;
        }
        tr th {
            text-align: center;
            border: 1px solid gainsboro;
        }

        tr td {
            text-align: center;
            align-self: center;
            padding: 2px;

        }
    </style>
</head>
<body>
<div id="main">
    <div id="mainData">
        <div id="head">
            <nav class="navbar navbar-inverse " role="navigation" style="margin: 0px;padding: 0px;border-radius: 0px;">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="text-shadow: 0px 0px 20px white;color: lightgray;font-weight: 200;">{{appName}}</a>
                </div>
                <div>
                    <ul class="nav navbar-nav navbar-left">
                        <li v-for="item in menuBar" :class="item.id == menuBarActiv ? 'active' : ''"  @click="menuClick(item)">
                            <a href="#" > {{item.name}} </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" style="margin: 0px;">
                        <li><a href="#">
                            <img   :src="$ImageUrl(loginUser.imgId,'small')" width="20px"/>
                            {{loginUser.name}}
                        </a></li>
                        <li><a :href="Vue.prototype.getUrl('/loginOut')"><span class="glyphicon glyphicon-log-in"></span> 退出登录</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div id="body" class="container-fluid">
            <div id="finalRow" class="row" style="height:100%">
                <!--侧边栏-->
                <div class="col-sm-1 column" style="height:100%;padding:0px;margin: 0px;background-color: #122b40;">
                    <!--<ul class="nav nav-pills nav-stacked">-->
                    <ul class="nav nav-pills nav-stacked">
                        <li v-for="item in leftBar" :class="['leftBarLi',{'active':item.id == leftBarActiv}]">
                            <a href="#" @click="leftClick(item)" class="leftBarItem">
                                <img   :src="$ImageUrl(item.imgId)"  width="25px" />
                                {{item.name}}
                            </a>
                        </li>
                    </ul>
                </div>
                <!--中间栏-->
                <div class="col-sm-11 column" style="overflow:auto;height:100%;margin: 0px;padding: 0px 0px 0px 0px;">
                    <!--三级菜单-->
                    <div id="bodyHead" style="margin: 0px;padding: 0px 0px 0px 0px;">
                        <ul id="myTab" class="nav nav-tabs" v-if="topBar.length > 0 ">
                            <li v-for="item in topBar" :class="['leftBarLi',{'active':item.id == topBarActiv}]">
                                <a href="#" @click="topClick(item)" data-toggle="tab" style="padding: 5px" >
                                    <img   :src="$ImageUrl(item.imgId)"  width="25px" />
                                    {{item.name}}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--动态加载的部分-->
                    <div id="bodyMain" style="overflow:auto;margin: 0px;padding: 0px 0px 0px 0px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--图片选择控件-->
<div id="imgSel"></div>
<!--商品选择控件-->
<div id="goodsSel"></div>
<!--厂商选择控件-->
<div id="venderSel"></div>
<!--左右列表选择控件-->
<div id="selListComponentID"></div>
<!--左右列表选择控件-->
<div id="ListComponent"></div>
</body>
<script th:inline="javascript">
    //全局变量
    var mainIndex = null;
    $(document).ready(function(){
        //采用vue管理框架展示
        mainIndex=new Vue({
            el: '#mainData',
            data: {
                menuTreeUrl : Vue.prototype.getUrl('/core/config/menu/getAllMenuTree'),
                appName:'淘食汇管理系统',
                menuBar:[], //上边栏
                leftBar:[], //左边栏
                topBar:[],//三级菜单
                menuBarActiv:'product', //上边栏激活的
                leftBarActiv:'dict', //左边栏激活的
                topBarActiv:'dict', //三级菜单栏激活的,
                loginUser:{},
                userEmployee:{},
            },
            methods: {
                //后期通过请求加载菜单
                menuClick:function(item) {
                    this.menuBarActiv = item.id;
                    //更新二级菜单栏
                    this.leftBar = item.childList;
                    //触发二级菜单
                    this.leftClick(item.childList[0]);
                },
                /**二级菜单*/
                leftClick:function(item) {
                    this.leftBarActiv = item.id;
                    console.log('  --> ' + JSON.stringify(item));
                    //更新三级菜单栏
                    this.topBar = item.childList;
                    if(item.childList.length > 0) {
                        //如果有三级菜单
                        this.topClick(item.childList[0]);

                    } else {
                        //加载页面
                        loadPageToBodyMain(item.href);
                    }

                },
                /**三级菜单*/
                topClick:function(item) {
                    this.topBarActiv = item.id;
                    //加载页面
                    loadPageToBodyMain(item.href);
                },
            },
            created: function () {
                //初始化菜单列表
                var that = this;
                this.$send(this.menuTreeUrl,null,function(data){
                    //二级菜单
                    that.menuBar = data.childList;
                    //二级菜单的第一列的列表
                    that.leftBar = data.childList[0].childList;
                    //加载页面
                    that.menuClick(that.menuBar[0]);
                });
                console.log("showPage/common/menuBar加载成功！！！");
                //初始化用户信息
                this.$send(this.getUrl('/session/get/user'),null,function(data){
                    //暂时写死 用于测试
                    //data = 'test';
                    //获取用户信息
                    that.$send(that.getUrl('/core/config/permission/user/get/' + data),null,function(userInfo){
                        that.loginUser = userInfo;
                    });
                    //获取部门信息
                    that.$send(that.getUrl('/product/employee/getByLoginAccount?loginAccount=' + data),null,function(employeeInfo){
                        that.userEmployee = employeeInfo;
                    });
                });

            },
            mounted: function() {
                reSizeFrame();
            }
        });

        //加入图片选择控件
        $('#imgSel').load(Vue.prototype.getUrl('/show/page/common/imgSelectList'));
        //加入商品选择控件
        $('#goodsSel').load(Vue.prototype.getUrl('/show/page/common/goodsSelectList'));
        //加入商品选择控件
        $('#venderSel').load(Vue.prototype.getUrl('/show/page/common/venderSelectList'));
        //加入左右列表选择控件
        $('#selListComponentID').load(Vue.prototype.getUrl('/show/page/common/selListComponent'));
        //列表控件
        $('#ListComponent').load(Vue.prototype.getUrl('/show/page/common/ListComponent'));
    });


    window.onresize = function () {
        reSizeFrame();
        reSizeBodyFrame();
    };


    function reSizeBodyFrame() {
        //主布局
        var bodyFrame = document.getElementById("bodyFrame");
        var topBody = document.getElementById("topBody");
        var centerBody = document.getElementById("centerBody");
        var bottomBody = document.getElementById("bottomBody");

        if (bodyFrame == null) {
            return;
        }
        centerBody.style.height = (bodyFrame.offsetHeight - topBody.offsetHeight- bottomBody.offsetHeight -5)  +'px';
    }
    function reSizeFrame(){
        //高度自适应铺满屏幕
        var head = document.getElementById("head");
        var body = document.getElementById("body");
        body.style.height = (window.innerHeight - head.offsetHeight)  +'px';

        //高度自适应铺满屏幕
        var bodyHead = document.getElementById("bodyHead");
        var bodyMain = document.getElementById("bodyMain");
        bodyMain.style.height = (body.offsetHeight - bodyHead.offsetHeight)  +'px';
    }
    /**
     * @author Guoshichang
     * @since 21:16 on 2018/9/16.
     * @Function
     */
    function loadPageToBodyMain(url) {
        //加入图片选择控件
        $('#bodyMain').load(Vue.prototype.getUrl(url),function(response,status,xhr){
            if(status != 'success') {
                console.log('加载异常:请检查URL:' + url);
                $('#bodyMain').html('');
            }
            //延时刷新框架
            setTimeout(function() {
                console.log('刷新框架');
                window.onresize();
            },50);
        });
    }

</script>
</html>